<template>
	<view style="overflow:hidden;height:92vh;" class="u-p-b-40">
		<view>
			<u-tabs ref="uTabs" bar-width="110" bar-height="4" :list="list" activeColor="#488EF5" font-size="30" :is-scroll="false" :current="tabCurrent" @change="tabsChange"></u-tabs>
		</view>
		<view class="content">
			
			<view class="box" style="height: 100vh;width: 100%;padding-bottom:60px;">
				<scroll-view scroll-y style="height:100%;width:100%;overflow:auto;" @scrolltolower="reachBottom">
				<u-row class="row" v-for="(item,index) in resultList" :key="index">
					<u-col span="2" text-align="center" @click="clickGarden(item)">
						<u-image v-if="index ===0" style="margin: 0 auto;" src="/static/img/loveforest/number_one.png" width="40" height="40" mode="aspectFit"></u-image>
						<u-image v-else-if="index ===1" style="margin: 0 auto;" src="/static/img/loveforest/number_two.png" width="40" height="40" mode="aspectFit"></u-image>
						<u-image v-else-if="index ===2" style="margin: 0 auto;" src="/static/img/loveforest/number_three.png" width="40" height="40" mode="aspectFit"></u-image>
						<span v-else>{{index+1}}</span>
					</u-col>
					<u-col span="5" @click="clickGarden(item)">
						<view class="u-line-1">
							<span class="name u-p-r-10">{{item.userName}}</span>
							<span class="dep">{{item.deptName}}</span>
						</view>
						<view class="des u-line-1">获得了{{item.certificateNum}}个成就证书</view>
					</u-col>
					<u-col span="5" class="u-line-1" @click="clickGarden(item)">
						<view class="u-line-1">
							<u-image v-if="item.isSteal == '0'" style="float:right;" src="/static/img/loveforest/enter.png" width="80" height="80" mode="aspectFit"></u-image>
							<view style="float:right;line-height:40px;margin-right:6px;" class="u-font-15 u-line-1 u-text-right">
								{{item.totalGainEnergy}}g
							</view>
						</view>
					</u-col>
				</u-row>
				<view class="rf-no-data" v-if="resultList.length == 0">
					暂无数据
				</view>
				<view class="rf-upload-tip" v-if="pageIndex < pageTotal && pageTotal > 0">
					
				</view>
				<view class="rf-upload-tip u-p-b-50" style="padding-bottom:100px;" v-else-if="pageTotal > 0">
					无更多数据
				</view>
				</scroll-view>
			</view>
			
		</view>
	</view>
</template>
<script>
	export default {
		data () {
			return {
				list: [{
						name: '周排行榜'
					},
					{
						name: '总排行榜'
					}
				],
				tabCurrent: 0,
				resultList: [],
				pageIndex: 1,
				pageSize: 10,
				pageTotal:0
			}
		},
		onShow () {
			this.loadData()
		},
		methods: {
			tabsChange (e) {
				console.log(e)
				this.pageIndex = 1
				this.tabCurrent = e
				this.loadData()
			},
			reachBottom () {
				if (this.pageIndex < this.pageTotal) {
					this.pageIndex += 1
					this.loadData()
				}
			},
			loadData() {
				let params = {currentPage:this.pageIndex,pageSize: 10,type:5}
				if(this.tabCurrent === 0) {
					this.$u.api.personalRank(params).then(res => {
						this.handleData(res)
					}).catch(res => {
						this.$u.toast(res.msg)
					})
				}else{
					let params = {currentPage:this.pageIndex,pageSize: 10}
					this.$u.api.personalRank(params).then(res => {
						this.handleData(res)
					}).catch(res => {
						this.$u.toast(res.msg)
					})
				}
				
			},
			handleData(res){
				let _total = res.pagination.total % 10
				if (_total == 0) {
					_total = parseInt(res.pagination.total / 10)
				} else {
					_total = parseInt(res.pagination.total / 10) + 1
				}
				if (this.pageIndex == 1) {
					this.resultList = res.list || []
				} else {
					this.resultList.push(...res.list)
				}
				this.pageTotal = _total
			},
			clickGarden(item) {
				if(item.userId == uni.getStorageSync("lifeData").vuex_user.userInfo.id) {
					return;
				}
				this.$u.route({
					url: 'pages/work/apply/loveforest/personal_garden/other_garden/other_garden',
					params:item
				})
			}
		},
		
	}
</script>
<style scoped lang="scss">
	.content {
		.row{
			padding: 16px 10px 16px 6px;
			border-top: 1px solid #eee;
			position: relative;
			top:-2px;
			.name {
				color:#333333;
				font-size: 30rpx;
				font-weight: bold;
			}
			.dep {
				font-size: 24rpx;
				color:#333333;
			}
			.des {
				color: #999999;
				font-size: 24rpx;
				margin-top:4px;
			}
		}
		
	}
	.rf-no-data {
		margin-top: 30px;
		padding-bottom: 20px;
		text-align: center;
		color: #cccccc;
	}
	.rf-upload-tip {
		text-align: center;
		line-height: 50px;
		font-size: 16px;
		color: #cccccc;
	}
</style>